<!-- 门票详情 -->

<template>
	<uni-nav-bar color="#000" :fixed="true" background-color="#fff" status-bar left-icon="left" title="门票详情"
		@clickLeft="back" />
	<view class="ticket">
		<image :src="state.shopDetail.cover_img" mode="widthFix"></image>
	</view>

	<view class="detail">
		<view class="title">
			<view class="name">{{state.shopDetail.name}}</view>
			<view class="price" v-if="state.shopDetail.price">票价：{{state.shopDetail.price}}元</view>
			<view class="share" @click="share()">分享</view>
		</view>
		<view class="time">{{state.shopDetail.ticket_date}}</view>
		<view class="address">
			{{state.shopDetail.ticket_address? state.shopDetail.ticket_address : '--'}}
		</view>
	</view>

	<!-- 选购规格 -->
	<view class="specification">
		<!-- <view class="type" style="margin-bottom: 40rpx">
			<view class="title">城市</view>
			<view class="content">
				<view class="tab" v-for="(item, index) in state.cityData" :key="index">
					<view class="buttons" :color="state.cityIndex == index? '#000000' : ''" :class="state.cityIndex == index? 'active-btn':''" @click="changeCity(item, index)">
						{{item}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="type">
			<view class="title" style="padding-bottom: 10rpx">选票</view>
			<view class="content">
				<view class="tab" v-for="(item, index) in state.popData" :key="index">
					<view class="buttons" :color="state.popupIndex == item.ind? '#000000' : ''" :class="state.popupIndex == index? 'active-btn':''" @click="changeType(item, index)">
						{{item.name}}
					</view>
					<view class="price">
						{{item.price}}元
					</view>
				</view>
			</view>
		</view>
		<view class="type" style="margin: 24rpx 0rpx">
			<view class="title" style="padding-bottom: 10rpx">数量</view>
			<view class="tab">
				<nut-input-number v-model="state.total" />
			</view>
		</view>
	</view>

	<view class="dateTime">
		<DateTabs v-model="state.time" @change='onDateTabsChange'></DateTabs>
	</view>

	<!-- 须知 -->
	<view class="must">
		<nut-tabs v-model="state.tab" :auto-height="true">
			<nut-tab-pane title="门票介绍" pane-key="0">
				<view class="wrap">
					<view class="title">门票介绍</view>
					<view class="desc">
						<rich-text :nodes="state.shopDetail.content"></rich-text>
					</view>
				</view>
			</nut-tab-pane>
			<nut-tab-pane title="购票须知" pane-key="1">
				<view class="wrap">
					<view class="title" style="margin-bottom: 170rpx;">购票须知</view>
					<view class="desc">
						<view class="item">
							<view class="circle"></view>本展览支持单人或多人组队参与，组队人数根据实际情况调整。
						</view>
						<view class="item">
							<view class="circle"></view>展览为大型沉浸式虚拟现实体验，在体验过程中请遵循指示行动，所出现的载具均为虚拟物品，切勿跑跳、依靠或就坐，以免发生意外。
						</view>
						<view class="item">
							<view class="circle"></view>在体验过程中，如遇疑问或不适，请勿自行卸下头戴设备。应保持原位并举手示意，工作人员将及时提供协助。
						</view>
						<view class="item">
							<view class="circle"></view>为确保参观体验的舒适度，建议穿着舒适、易于行动的鞋履，如运动鞋或平底鞋，避免高跟鞋。
						</view>
						<view class="item">
							<view class="circle"></view>体验需佩戴头戴式设备，建议女士避免使用高发髻、丸子头等造型，以免影响佩戴。
						</view>
						<view class="item">
							<view class="circle"></view>儿童参观提示：展览需佩戴设备，头戴设备重量为0.7KG，建议身高1.2米以下儿童的家长根据实际情况谨慎购票（6岁以下儿童谢绝入场，6岁以上儿童需单独一位家长陪同一起持票入场）。
						</view>
						<view class="item">
							<view class="circle"></view>孕妇及心脏手术后（如：安装起搏器、心脏搭桥、心脏支架等）的人士，不宜体验此展览，如需入场请提前告知现场工作人员。
						</view>
						<view class="item">
							<view class="circle"></view> 门票一经售出，概不退票。
						</view>
					</view>

					<view class="desc" style="margin-top: 80rpx; margin-bottom: 30rpx;">
						<view class="item">
							<view class="circle"></view>This exhibition supports single or multiple team participation, and the number of team members can be adjusted according to the actual situation.
						</view>
						<view class="item">
							<view class="circle"></view>The exhibition is a large-scale immersive virtual reality experience, please follow the instructions during the experience, the vehicles are virtual items, do not run, jump, lean on or sit down to avoid accidents.
						</view>
						<view class="item">
							<view class="circle"></view>During the experience, do not remove the headset in case of doubt or discomfort. Should remain in place and show your hands, staff will provide assistance in a timely manner.
						</view>
						<view class="item">
							<view class="circle"></view>To ensure a comfortable experience, it is recommended to wear comfortable, easy-to-move footwear, such as sneakers or flats, and avoid high heels.
						</view>
						<view class="item">
							<view class="circle"></view>The experience requires wearing head-worn devices. It is recommended that women avoid using high buns, balls and other styles, so as not to affect wearing.
						</view>
						<view class="item">
							<view class="circle"></view>Tips for children: The exhibition needs to wear equipment, the weight of the headset is 0.7KG, it is recommended that parents of children under 1.2 meters in height purchase tickets carefully according to the actual situation (children under 6 years old are not allowed to enter, children over 6 years old need to be accompanied by a parent with tickets).
						</view>
						<view class="item">
							<view class="circle"></view>Pregnant women and people who have undergone cardiac surgery (such as installation of pacemakers, heart bypass, heart stents, etc.) are not allowed to experience this exhibition. Please inform the on-site staff in advance if you need to enter.
						</view>
						<view class="item">
							<view class="circle"></view>Tickets are non-refundable once sold.
						</view>
					</view>
				</view>
			</nut-tab-pane>
		</nut-tabs>
	</view>

	<view class="bottom-btn">
		<!-- <view class="btn-item-one" @click="shop(0)">加入购物车</view> -->
		
		<button class="btn-item-two active" @click="pay" v-if="store.userInfo.ApiToken">
			立即购票
		</button>
		<button class="btn-item-two active" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else>
			立即购票
		</button>
	</view>

	<!-- 底部分享弹出 -->
	<nut-popup position="bottom" teleport="#app" teleport-disable closeable round v-model:visible="showTeleport">
		<view class="bottom">
			<view class="wxchat">
				<button class="shareBtn" data-name="shareBtn" open-type="share">
					<image src="../../static/images/wxchat.png" mode=""></image>好友
				</button>
			</view>
			<view class="code" @click="sharepic()">
				<image src="../../static/images/code.png" mode=""></image>微信好友
			</view>
		</view>
		<view class="btn" style="margin-bottom: 40rpx;" @click="share()">取消</view>
	</nut-popup>

	<!-- 海报弹窗 -->
	<view class="haibao">
		<nut-popup teleport="#app" teleport-disable v-model:visible="showShare">
			<image :show-menu-by-longpress='true' class="shareImg" :src="shareImg" v-if="shareImg"
				style="width: 700rpx;height: 1200rpx;"></image>
		</nut-popup>
	</view>

	<poster ref="posters" :list="state.list" background-color="#FFF" :width="700" :height="1200"
		@on-success="posterSuccess" @on-error="posterError"></poster>
</template>


<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import {
		goodsInfo
	} from '@/request/api/shop.js';
	import {
		miniPhone,
		goodInfo
	} from '@/request/api/vip.js';

	import {
		useCartStore
	} from '@/store/cart.js';
	import Poster from '@/components/zhangyuhao-poster/Poster.vue';
	import DateTabs from '@/uni_modules/hope-11-date-tabs-v3/components/hope-11-date-tabs-v3/hope-11-date-tabs-v3.vue';
	import { createOrder, OrderPay } from '@/request/api/shop.js';

	const store = useCartStore();

	const id = ref(null);
	const buyType = ref(null); // 0 购物车  1 购买


	const showShare = ref(false); // 海报弹窗
	const showTeleport = ref(false);
	const showShop = ref(false);

	const shareImg = ref('');
	const posters = ref('');

	const state = reactive({
		shopDetail: {},
		popupIndex: 0,
		tab: 0,
		total: 1,
		popData: [],
		cityData: [],
		cityIndex: 0,
		phone: '',
		time: '',
		list: [{
				type: 'image',
				// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
				path: 'https://img.agrimedia.cn/storage/bmdc/20230501/4c31c9091df8715dc3354ec78fea6c9cb3d90f50.jpeg?imageView/1/w/400/h/400',
				x: 0,
				y: 0,
				width: 700,
				height: 1200
			},
			{
				type: 'image',
				// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
				path: 'https://img.agrimedia.cn/storage/bmdc/20230501/4c31c9091df8715dc3354ec78fea6c9cb3d90f50.jpeg?imageView/1/w/400/h/400',
				x: 530,
				y: 1050,
				width: 100,
				height: 100
			},
			{
				type: 'textarea',
				width: 700,
				height: 150,
				x: 30,
				y: 1050,
				text: '1.保存图片到相册',
				size: 30,
				color: '#fff'
			},
			{
				type: 'textarea',
				width: 700,
				height: 150,
				x: 30,
				y: 1100,
				text: '2.打开微信扫码可见',
				size: 30,
				color: '#fff'
			},
			{
				type: 'textarea',
				width: 700,
				height: 150,
				x: 30,
				y: 1150,
				text: '2.打开微信扫码可见',
				size: 30,
				color: '#fff'
			}
		]
	})

	onLoad((e) => {
		id.value = e.id;
		getDetailData()
		// 判断是否为iOS设备
		    if (uni.getSystemInfoSync().platform === 'ios') {
		      // 为webview设置安全区域
			  console.log('122222222')
		      uni.setPageSafeArea({
		        safeAreaInsets: {
		          top: 20 // 这个值通常是根据设备的不同来设定的，20是一个大概的数值
		        }
		      });
		    }
	})

	// 商品详情
	const getDetailData = async () => {
		try {
			let paramas = {
				id: id.value
			}
			const resultData = await goodInfo(paramas);
			state.shopDetail = resultData.data;

			// 规格转换
			state.popData = state.shopDetail.sku.split(",").map((item, ind) => {
				const [name, price, index] = item.split("-");
				return {
					name,
					price: parseInt(price),
					ind
				};
			});
			
			// 城市转换
			state.cityData = state.shopDetail.ticket_address.split('、');
			
			// 海报设置
			state.list[0].path = state.shopDetail.img[0];
			state.list[1].text = state.shopDetail.ticket_address;
			state.list[2].text = state.shopDetail.ticket_date;
			state.list[3].text = state.shopDetail.sku;
		} catch (e) {}
	}

	// 购物车
	const goCart = () => {
		uni.navigateTo({
			url: '/pages/index/cart'
		})
	}


	// 选择日期
	const onDateTabsChange = (e) => {
		console.log(e)
	}

	// 分享
	const share = () => {
		showTeleport.value = !showTeleport.value;
	}

	// 海报
	const sharepic = async () => {
		await nextTick(() => {
			uni.showLoading({
				mask: true,
				title: "生成海报中..."
			})
			posters.value.create();
		})
	}

	// 海报生成成功
	const posterSuccess = (e) => {
		uni.hideLoading({});
		showShare.value = true;
		shareImg.value = e;
		showTeleport.value = false;
	}

	// 错误
	const posterError = (e) => {
		console.log(e)
	}
	
	const pay = () => {
		console.log('已经登陆了')
		const goods_info = [
			{
				goods_id: state.shopDetail.id,
				buy_num: state.total,
				sku: state.popData[state.popupIndex]
			}
		];
		
		const params = {
			goods_info: JSON.stringify(goods_info),
			yuyue_date: state.time,
			city: state.shopDetail.ticket_address,
			phone: store.userInfo.phone,
			member_name: store.userInfo.nickname
		};
		
		
		// 创建订单
		createOrder(params).then(res => {
			if (res.code == 200) {
				let payParams = { order_sn: res.data.order_sn }
				OrderPay(payParams).then(res => {
					uni.requestPayment({
						provider: 'wxpay',    //支付类型-固定值
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.package, // 固定值
						signType: res.data.signType, //固定值
						paySign: res.data.paySign, //签名
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
							console.log("支付成功");
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								duration: 1000,
							});
							setTimeout(() =>{
								uni.navigateTo({
									url: '/pages/my/ticket'
								})
							}, 1000)
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 1000,
							});
						}
					});
				})
			}
		})
	}

	// 登录手机号并支付
	const getPhoneNumber = async (e) => {
		uni.login({
			complete(i) {
				const params = {
					auth_code: i.code,
					code: e.detail.code
				}	
				// 提交订单
				miniPhone(params).then(res => {
					const goods_info = [
						{
							goods_id: state.shopDetail.id,
							buy_num: state.total,
							sku: state.popData[state.popupIndex]
						}
					];
					
					const params = {
						goods_info: JSON.stringify(goods_info),
						yuyue_date: state.time,
						city: state.shopDetail.ticket_address,
						phone: res.data.phone,
						member_name: res.data.nickname
					};
					
					store.setToken(res.data.ApiToken);
					// res.data.avatar_url = avatar.value;
					store.setUserInfo(res.data);
					
					// 创建订单
					createOrder(params).then(res => {
						if (res.code == 200) {
							let payParams = { order_sn: res.data.order_sn }
							OrderPay(payParams).then(res => {
								uni.requestPayment({
									provider: 'wxpay',    //支付类型-固定值
									timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
									nonceStr: res.data.nonceStr, // 随机字符串
									package: res.data.package, // 固定值
									signType: res.data.signType, //固定值
									paySign: res.data.paySign, //签名
									success: function (res) {
										console.log('success:' + JSON.stringify(res));
										console.log("支付成功");
										uni.showToast({
											title: '支付成功',
											icon: 'none',
											duration: 1000,
										});
										setTimeout(() =>{
											uni.navigateTo({
												url: '/pages/my/order?index=5'
											})
										}, 1000)
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 1000,
										});
									}
								});
							})
						}
					})
				})
			}
		})
	}

	// 选择规格
	const changeType = (item, index) => {
		state.popupIndex = index;
	}

	const changeCity = (item, index) => {
		state.cityIndex = index;
	}
	
	// 立即购票 + 1张默认的进入购物车
	const goBuy = () => {
		state.shopDetail.size = state.popData[state.popupIndex];
		state.shopDetail.total = state.total; // 购买数量
		store.addGoods(state.shopDetail);
		uni.navigateTo({
			url: '/pages/index/cart?type=0'
		})
	}

	// 0 添加购物车  1 下单
	const addshop = () => {
		state.shopDetail.size = state.popData[state.popupIndex];
		state.shopDetail.total = state.total; // 购买数量
		state.shopDetail.allprice = state.total;
		showShop.value = false;
		if (store.token) {
			if (buyType.value == 0) {
				store.addGoods(state.shopDetail);
			} else {
				// 直接去下单页
				uni.navigateTo({
					url: `/pages/shop/shoporder?data=${JSON.stringify(state.shopDetail)}&type=1`
				})
			}
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}

	// 返回
	const back = () => {
		uni.switchTab({
			url: "/pages/vip/vip"
		})
	}
</script>

<style lang="scss" scoped>
	.ticket {
		width: 100%;
		text-align: center;

		image {
			width: 100%;
		}
	}

	.detail {
		border-bottom: 4rpx solid #DDD8D3;
		padding: 60rpx 36rpx 14rpx 36rpx;
		box-sizing: border-box;

		.header {
			font-size: 64rpx;
			font-family: NewYork;
			color: #1C1919;
			line-height: 60rpx;
			margin-bottom: 4rpx;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.name {
				font-size: 50rpx;
				font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
				font-weight: bold;
				color: #1C1919;
				line-height: 60rpx;
			}

			.price {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 24rpx;

			}

			.share {
				width: 97rpx;
				height: 44rpx;
				background: #000000;
				border-radius: 46rpx;
				font-size: 20rpx;
				color: #fff;
				line-height: 44rpx;
				text-align: center;
			}
		}

		.time,
		.address {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 24rpx;
			margin-bottom: 20rpx;
		}
	}

	.specification {
		padding: 24rpx 36rpx;
		box-sizing: border-box;
		border-bottom: 4rpx solid #DDD8D3;

		.content {
			display: flex;
			margin-bottom: 28rpx;
		}
		.type {
			display: block;
			align-items: center;
			padding: 20rpx 0rpx;
			.title {
				display: block;
				width: 160rpx;
				text-align: left;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 800;
				color: #1C1919;
				line-height: 24rpx;
				margin-bottom: 20rpx;
			}

			.name {
				width: 220rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 24rpx;
			}

			.tab {
				display: flex;
				flex-wrap: wrap;
				margin-right: 36rpx;
			}
			
			.buttons {
				background-color: #FFFFFF;
				border: 2rpx solid #000;
				border-radius: 30rpx;
				padding: 10rpx 18rpx;
				font-size: 26rpx;
			}
			
			.active-btn {
				background-color: #000;
				color: #fff;
			}

			.price {
				width: 154rpx;
				text-align: center;
				margin-top: 10rpx;
				font-size: 26rpx;
			}
		}
		
		::v-deep .nut-button {
			width: 100% !important;
		}

		::v-deep .nut-button--normal {
			width: 154rpx;
			height: 52rpx;
			font-size: 26rpx !important;
		}

		.number {
			.name {
				width: 120rpx;
			}
		}

		.tip {
			font-size: 24rpx;
			margin-top: 20rpx;
		}
	}

	.must {
		::v-deep .nut-tabs__titles {
			border-bottom: 4rpx solid #DDD8D3;
		}

		.wrap {
			padding: 36rpx 64rpx 200rpx 60rpx;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1C1919;
				line-height: 24rpx;
				text-align: center;
				margin-bottom: 34rpx;
			}

			.desc {
				// font-family: PingFangSC-Medium, PingFang SC;
				.item {
					width: 100%;
					margin-bottom: 10rpx;
					line-height: 60rpx;
					font-weight: 300;
					.circle {
						line-height: 40rpx;
						display: inline-block;
						margin-right: 14rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: #000;
					}
				}
			}
		}
	}

	.cart-img {
		position: fixed;
		bottom: 120rpx;
		left: 50rpx;
		z-index: 99;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.bottom-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0rpx 56rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 20rpx;
		z-index: 99;
		width: 100%;

		.btn-item-one {
			width: 50%;
			height: 92rpx;
			line-height: 92rpx;
			background: #FFFFFF;
			border-radius: 46rpx 0rpx 0rpx 46rpx;
			border: 2rpx solid #000000;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			box-sizing: border-box;
		}

		.btn-item-two {
			width: 50%;
			height: 92rpx;
			line-height: 92rpx;
			background: #000 !important;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			border: 2rpx solid #000 !important;
			border-left: 0rpx;
			text-align: center;
			font-size: 32rpx !important;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			box-sizing: border-box;
		}

		.active {
			border: 2rpx solid #000000;
			background-color: #000000;
			color: #fff;
		}
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 56rpx;
		box-sizing: border-box;

		.wxchat,
		.code {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;

			image {
				width: 140rpx;
				height: 140rpx;
			}

			text-align: cell;
		}
	}

	.btn {
		margin: 0 auto;
		width: 90%;
		text-align: center;
		color: #fff;
		line-height: 92rpx;
		height: 92rpx;
		background: #000000;
		border-radius: 46rpx;
	}

	.bottom-detail {
		padding: 100rpx 56rpx 62rpx 56rpx;
		box-sizing: border-box;
		position: relative;

		::v-deep .nut-button--normal {
			width: 154rpx;
			height: 52rpx;
			font-size: 26rpx !important;
		}

		image {
			position: absolute;
			top: -100rpx;
			z-index: 9999;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			width: 184rpx;
			height: 184rpx;
			border-radius: 50%;
		}

		.title {
			text-align: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 60rpx;
		}

		.price {
			text-align: center;
			font-size: 46rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 60rpx;
			margin-bottom: 10rpx;
		}

		.tip {
			text-align: center;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 24rpx;
			margin-bottom: 22rpx;
		}

		.btn {
			width: 100%;
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}
	}

	.popshop {
		::v-deep .nut-popup {
			overflow-y: inherit !important;
		}
	}

	.shareBtn {
		background-color: transparent !important;
		border: transparent !important;
		padding: none !important;
		text-align: center !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	::v-deep button {
		margin: 0 !important;
		background-color: transparent !important;
		border: 1rpx solid transparent;
		font-size: 24rpx !important;
		font-weight: 400 !important;
		padding: 0rpx !important;
	}

	::v-deep button::after {
		border: none
	}

	.haibao ::v-deep .nut-popup {
		background-color: transparent !important;
	}

	.dateTime {
		display: flex;
		justify-content: center;
		border-bottom: 6rpx solid #DDD8D3;
		margin-top: 20rpx;
		padding-bottom: 6rpx;
	}
</style>